<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登陆</title>
<link rel="stylesheet" href="/style/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> 

<style type="text/css">
	a{
		text-decoration: none;
	}
</style>
</head>
<body>
	<form action="/login" method="get" >
		用户名：<input type="text" name="username"><br>
		密&nbsp;&nbsp;码 :<input type="text" name="password"><br><br>
		<input type="submit" value="SUBMIT"><br>
	</form>
	
	用合作网站账号登陆:
	<span>
		<a href="/auth/sina/logon" target="_blank">
			<img alt="" src="/images/sina_16x16.png">
		</a>
	</span>&nbsp;

	<span>
		<a href="/auth/qq/logon" target="_blank">
			<img alt="" src="/images/qq_16x16.png">
		</a>
	</span>&nbsp;
	
	<span>
		<a href="/auth/renren/logon" target="_blank">
			<img alt="" src="/images/renren_16x16.png">
		</a>
	</span>
	
	<span><a id="popA" href="#pop" >更多</a></span>
	<span><a id="popC" href="#pop" >C</a></span>
	<span><a id="popB" href="/auth/qq/logon" >更多</a></span>
	
	<div id="pop" class="pop" style="width: 300px;height: 200px;background-color: blue;">
		<form>
			<input type="text">
			<input type="text">
		</form>
	</div>
</body>
<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/js/jplugin/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript">
	/* var popDiv = function(){
		$("a#popA").fancybox();
	}; */
	
	
	//http://hi.baidu.com/119991/blog/item/171ae855bce79f083a2935d3.html
	$("a#popC").click(function(){
		$.fancybox(["/auth/qq/logon"],{'modal':false,'type':'ajax'}); //type image,inline,iframe,ajax
	});
	//可以加载DIV、图片、图片集、Ajax数据、SWF影片，iframe页面等
	
	$(function(){
		//$("#pop").hide();
		$("a#popA").fancybox({
			'callbackOnStart':function(){alert("callbackOnStart");},
			'callbackOnShow':function(){alert('callbackOnShow');},
			'callbackOnClose':function(){alert('callbackOnClose');},
			'send' : {},
			'modal':false,
			'overlayShow' :true,
			'hideOnContentClick'  :false,
			'callbackOnShow'    : function(){$("#pop").show();},
			'titlePosition' 	: 'over', 
			'cyclic' 			: true, 
			'titleFormat' 		: function(title, currentArray, currentIndex, currentOpts) { 
			return '<span id="fancybox-title-over">' + (currentIndex + 1) + 
			' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; 
			
			} 

			
		});
		
		$("a#popB").fancybox();
	});
</script>
</html>